<template>
  <el-dialog v-model="visible" title="忘记密码" width="800px">
    <el-form ref="formRef" :model="formData" label-width="auto" :rules="rules">
      <el-form-item prop="mobile">
        <el-input
          ref="mobile"
          v-model="formData.mobile"
          :placeholder="$t('login.mobile')"
          name="mobile"
          size="large"
          maxlength="11"
        >
          <template #prefix>
            <el-icon class="mx-2">
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="smsCode">
        <el-input
          v-model="formData.smsCode"
          :placeholder="$t('login.code')"
          size="large"
          @keyup.enter="handleSubmit"
        >
          <template #append>
            <CodeButton
              :mobile="formData.mobile"
              smsType="LOGIN"
              :validateFunction="validateFunction"
              @getCode="(smsCode: any) => (formData.smsCode = smsCode)"
            />
          </template>
          <template #prefix>
            <el-icon class="mx-2">
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="formData.password" placeholder="请输入密码" name="password" size="large">
          <template #prefix>
            <el-icon class="mx-2">
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
import UserAPI from "@/api/system/user";
import CodeButton from "@/components/SmsCode/CodeButton.vue";
import { useI18n } from "vue-i18n";
defineOptions({
  name: "forget-password",
});
const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

const { t } = useI18n();

const visible = defineModel<boolean>();

const formRef = ref();
const loading = ref(false);
const formData = ref({
  mobile: "",
  smsCode: "",
  password: "",
});

const rules = computed(() => {
  return {
    mobile: [
      {
        required: true,
        trigger: "blur",
        message: "手机号不能为空",
      },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!value) {
            callback(new Error("手机号不能为空"));
          } else if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error("请输入正确的手机号"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      },
    ],
    smsCode: [
      {
        required: true,
        trigger: "blur",
        message: "验证码不能为空",
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
      {
        min: 6,
        message: t("login.message.password.min"),
        trigger: "blur",
      },
    ],
  };
});

async function handleSubmit() {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      try {
        loading.value = true;
        await UserAPI.forgetPwd(formData.value);
        handleCloseDialog();
        ElMessage.success("修改成功");
      } catch (e) {
        console.log(" 修改失败 ", e);
      } finally {
        loading.value = false;
      }
    }
  });
}
// 关闭弹窗
function handleCloseDialog() {
  visible.value = false;
  emit("cancel");
  emit("update:modelValue", false); // 关闭弹窗
}

const validateFunction = async () => {
  const result = await formRef.value?.validateField("mobile", (valid) => {
    if (valid) {
      console.log("valid");
      return true;
    } else {
      ElMessage.error("请输入有效的手机号码");
      return false;
    }
  });
  console.log(result);
  return result;
};
</script>
<style lang="scss" scoped>
/* Your SCSS styles go here */
</style>
